<template>
    <view class="lease-goods-container">
        <!-- Header -->
        <view class="header">
            <!-- 吸顶栏 -->
            <u-sticky offset-top="0" h5-nav-height="0">
                <!-- 搜索 -->
                <view class="search row">
                    <u-search
                        class="flex1"
                        v-model="keyword"
                        :focus="showHistory"
                        @focus="showHistory = true"
                        @search="onSearch"
                        bg-color="#F4F4F4"
                    />
                    <view class="search--cancel" v-show="showHistory" @tap="onCancelSearch"
                        >取消</view
                    >
                </view>
            </u-sticky>
        </view>

        <!-- 搜索历史 -->
        <view v-show="showHistory" class="bg-white search-container">
            <view v-if="hotList.length" class="search-content">
                <view class="search-title">热门搜索</view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in hotList" :key="index">
                        <view
                            class="search-words br60 mr20 mb20 lighter sm line1"
                            @tap="onChangeKeyword(item)"
                            >{{ item }}</view
                        >
                    </block>
                </view>
            </view>
            <view v-if="historyList.length" class="search-content">
                <view class="search-title row-between">
                    <view>历史搜索</view>
                    <view
                        class="xs muted mr20"
                        style="padding: 10rpx 20rpx"
                        @tap="clearSearchHistory"
                        >清空</view
                    >
                </view>
                <view class="search-item row wrap">
                    <block v-for="(item, index) in historyList" :key="index">
                        <view
                            class="search-words br60 mr20 mb20 lighter sm line1"
                            @tap="onChangeKeyword(item)"
                            >{{ item }}</view
                        >
                    </block>
                </view>
            </view>
            <view class="search-mask" @tap="onCancelSearch"></view>
        </view>

        <!-- Main -->
        <view class="main" v-show="!showHistory">
            <!-- 商品分类 -->
            <view class="goods-class-wrap">
                <view class="goods-class-content">
                    <view class="goods-class-item" @tap="onClassify('')">
                        <view
                            class="goods-class-item-picture"
                            :class="{ 'goods-class-item-picture--active': !classify_id }"
                        >
                            <u-image
                                width="100"
                                height="100"
                                shape="circle"
                                src="/static/images/lease_all.png"
                            />
                        </view>
                        <view :style="{ color: !classify_id ? '#24A3FF' : '#333333' }">全部</view>
                    </view>
                    <block v-for="item in leaseClassifyList" :key="item.id">
                        <view class="goods-class-item" @tap="onClassify(item.id)">
                            <view
                                class="goods-class-item-picture"
                                :class="{
                                    'goods-class-item-picture--active': classify_id == item.id
                                }"
                            >
                                <u-image
                                    width="100"
                                    height="100"
                                    shape="circle"
                                    :src="item.image"
                                />
                            </view>
                            <view
                                :style="{ color: classify_id == item.id ? '#24A3FF' : '#333333' }"
                                class="line-1"
                                >{{ item.name }}</view
                            >
                        </view>
                    </block>
                </view>
            </view>

            <!-- 商品排序方式 -->
            <view class="sort-nav row bg-white mt20">
                <!-- 综合 -->
                <view
                    :class="'sort-tag row-center ' + (comprehensive ? 'primary' : '')"
                    @tap="onNormal"
                    >综合</view
                >
                <!-- 价格 -->
                <view class="sort-tag row-center" data-type="priceSort" @tap="onPriceSort">
                    <text :class="priceSort ? 'primary' : ''">价格</text>
                    <view>
                        <trigonometry
                            direction="up"
                            size="small"
                            :color="priceSort == 'desc' ? '#FF5058' : '#333'"
                        />
                        <trigonometry
                            size="small"
                            :color="priceSort == 'asc' ? '#FF5058' : '#333'"
                        />
                    </view>
                </view>
                <!-- 销量 -->
                <view class="sort-tag row-center" data-type="saleSort" @tap="onSaleSort">
                    <text :class="saleSort ? 'primary' : ''">销量</text>
                    <view>
                        <trigonometry
                            direction="up"
                            size="small"
                            :color="saleSort == 'desc' ? '#FF5058' : '#333'"
                        />
                        <trigonometry
                            size="small"
                            :color="saleSort == 'asc' ? '#FF5058' : '#333'"
                        />
                    </view>
                </view>
                <!-- 商品排序展示方式 -->
                <view class="sort-type row-center" @tap="changeType">
                    <image
                        class="icon-sm"
                        :src="
                            goodsType === 'one'
                                ? '/static/images/icon_double.png'
                                : '/static/images/icon_one.png'
                        "
                    />
                </view>
            </view>

            <!-- 商品列表 -->
            <view class="goods-list-wrap">
                <!-- 商品样式1 -->
                <view v-show="goodsType == 'one'">
                    <view class="goods-container-one">
                        <block v-for="(item, index) in goodsList" :key="item.id">
                            <view class="goods-item-one" @tap="goGoodsDetail(item.id)">
                                <!-- Image -->
                                <u-image
                                    width="180"
                                    height="180"
                                    border-radius="4px"
                                    :src="item.image"
                                />

                                <view class="goods-info">
                                    <!-- Name -->
                                    <view class="row">
                                        <view class="lease-icon">租</view>
                                        <view class="goods-name line1" style="width: 420rpx">{{
                                            item.name
                                        }}</view>
                                    </view>
                                    <!-- Tag -->
                                    <view class="row mt10">
                                        <template v-if="item.tag">
                                            <view class="goods-tag">{{ item.tag }}</view>
                                        </template>
                                        <!--                      <template v-if="item.free_shipping_type == 1">
                                            <view class="goods-tag">包邮</view>
                                        </template> -->
                                    </view>
                                    <!-- Price -->
                                    <view class="ornament goods-price">
                                        <view>
                                            <text class="xs mr10">¥</text>
                                            <!-- 整数 -->
                                            <text class="xxl">{{
                                                formatPrice(item.price, 'integer')
                                            }}</text>
                                            <!-- 小数 -->
                                            <text class="xs">{{
                                                formatPrice(item.price, 'decimals')
                                            }}</text>
                                            <!-- 单位 -->
                                            <text class="xs">{{
                                                item.is_unit == 1 ? '/天' : '/月'
                                            }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>

                <!-- 商品样式2 -->
                <view v-show="goodsType == 'double'">
                    <view class="goods-container-double">
                        <block v-for="(item, index) in goodsList" :key="item.id">
                            <view class="goods-item-double" @tap="goGoodsDetail(item.id)">
                                <!-- Image -->
                                <u-image width="345" height="345" :src="item.image" />

                                <view class="goods-info">
                                    <!-- Name -->
                                    <view class="row">
                                        <view class="lease-icon">租</view>
                                        <view class="goods-name line1">{{ item.name }}</view>
                                    </view>
                                    <!-- Tag -->
                                    <view class="row mt10">
                                        <template v-if="item.tag">
                                            <view class="goods-tag">{{ item.tag }}</view>
                                        </template>
                                        <template v-if="item.free_shipping_type == 1">
                                            <view class="goods-tag">包邮</view>
                                        </template>
                                    </view>
                                    <!-- Price -->
                                    <view class="ornament goods-price">
                                        <text class="xs mr10">¥</text>
                                        <!-- 整数 -->
                                        <text class="xxl">{{
                                            formatPrice(item.price, 'integer')
                                        }}</text>
                                        <!-- 小数 -->
                                        <text class="xs">{{
                                            formatPrice(item.price, 'decimals')
                                        }}</text>
                                        <!-- 单位 -->
                                        <text class="xs">{{
                                            item.is_unit == 1 ? '/天' : '/月'
                                        }}</text>
                                    </view>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>

            <!-- 加载状态 -->
            <loading-footer :status="status" :slot-empty="true">
                <view slot="empty" class="column-center" style="padding-top: 200rpx">
                    <image class="img-null" src="/static/images/goods_null.png"></image>
                    <text class="lighter">暂无商品</text>
                </view>
            </loading-footer>
        </view>
    </view>
</template>

<script>
import { getLeaseClassify, getLeaseGoodsList } from '@/api/lease.js'

import { getSearchpage, clearSearch } from '@/api/store'

import { loadingFun, formatPrice } from '@/utils/tools'
import { loadingType } from '@/utils/type'

export default {
    data() {
        return {
            keyword: '', // 搜索内容
            status: loadingType.LOADING, // 加载状态
            page: 1, // 当前数据页面
            goodsType: 'one', // 商品列表样式展示方式
            goodsList: [], // 商品列表数据
            priceSort: '', // 价格排序
            saleSort: '', // 销量排序
            classify_id: '', // 分类ID
            showHistory: false, // 显示搜索历史
            historyList: [], // 搜索历史数据列表
            hotList: [], // 热门搜素数据列表
            leaseClassifyList: [] // 租赁分类列表
        }
    },
    watch: {
        // 监听属性
        keyword(value, old) {
            if (!value && !this.id) this.showHistory = true
        },
        // 是否处于搜索
        showHistory(value) {
            if (value) this.getSearchpageFun()
        }
    },
    computed: {
        comprehensive() {
            const priceSort = this.priceSort
            const saleSort = this.saleSort

            return !priceSort && !saleSort ? true : false
        }
    },

    onLoad(options) {
        // 获取分类列表数据
        getLeaseClassify().then((res) => {
            if (res.code != 1) return
            this.leaseClassifyList = res.data
            // this.classify_id = res.data[0].id || '';
            // 商品列表数据请求
            this.getGoodsList()
        })
    },

    // 上拉加载更多数据
    onReachBottom() {
        this.getGoodsList()
    },

    methods: {
        // 格式化价格输出
        formatPrice,

        // 更改商品排序样式
        changeType() {
            this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
        },

        // 清空搜索记录
        clearSearchHistory() {
            clearSearch().then((res) => {
                if (res.code != 1) return
                this.getSearchpageFun()
            })
        },

        // 点击取消搜索
        onCancelSearch() {
            this.showHistory = false
            // this.onRefresh();
        },

        // 点击分类
        onClassify(goods_id) {
            this.classify_id = goods_id
            this.onRefresh()
        },

        // 点击综合
        onNormal() {
            this.priceSort = ''
            this.saleSort = ''
            this.onRefresh()
        },

        // 点击价格排序
        onPriceSort() {
            this.saleSort = ''
            this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
            this.onRefresh()
        },

        // 点击销量排序
        onSaleSort() {
            this.priceSort = ''
            this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
            this.onRefresh()
        },

        // 获取搜索变化
        getSearchpageFun() {
            getSearchpage().then((res) => {
                if (res.code != 1) return
                const data = res.data
                this.hotList = data.hot_lists
                this.historyList = data.history_lists
            })
        },

        // 搜索
        onSearch() {
            this.onRefresh()
        },

        // 刷新列表数据
        onRefresh() {
            this.showHistory = false
            this.page = 1
            this.goodsList = []
            this.status = loadingType.LOADING
            this.$nextTick(() => this.getGoodsList())
        },

        // 根据字符串搜索内容
        onChangeKeyword(item) {
            this.keyword = item
            this.showHistory = false
            this.onRefresh()
        },

        // 获取商品列表数据
        getGoodsList() {
            if (this.status == loadingType.FINISHED) return
            // 参数
            const field = {
                category_id: this.classify_id,
                keyword: this.keyword,
                price: this.priceSort,
                sales_sum: this.saleSort
            }
            // 请求
            loadingFun(getLeaseGoodsList, this.page, this.goodsList, this.status, field).then(
                (res) => {
                    console.log(res)
                    if (!res) return
                    this.page = res.page
                    this.goodsList = res.dataList
                    this.status = res.status
                }
            )
        },

        // 查看商品详情
        goGoodsDetail(goods_id) {
            uni.navigateTo({
                url:
                    '/bundle/pages/lease_goods_details/lease_goods_details' + '?' + 'id=' + goods_id
            })
        }
    }
}
</script>

<style scoped>
.search {
    position: relative;
    z-index: 1;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
}

.search--cancel {
    /* padding: 0 20rpx; */
    padding-right: 20rpx;
}

.main {
    padding: 20rpx;
}

.goods-class-wrap {
    /* box-sizing: border-box; */
    height: 200rpx;
    padding: 20rpx;
    border-radius: 10px;
    background-color: #ffffff;
}

.goods-class-content {
    display: flex;
    height: 100%;
    overflow: auto;
}

.goods-class-item {
    /* box-sizing: border-box; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 10rpx;
    font-size: 24rpx;
}

.goods-class-item-picture {
    border-radius: 50%;
    margin-bottom: 10rpx;
    box-shadow: 0 0 0 1px #e5e5e5;
}

.goods-class-item-picture--active {
    /* border: 1px solid #24A3FF; */
    box-shadow: 0 0 0 1px #24a3ff;
}

.goods-class-item:nth-child(n + 2) {
    margin-left: 20rpx;
}

.sort-nav {
    height: 80rpx;
    border-radius: 10px;
}

.sort-tag {
    height: 100%;
    flex: 2;
}

.sort-type {
    flex: 1;
    position: relative;
}

.sort-type::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    content: '';
    display: block;
    width: 1rpx;
    height: 1em;
    background-color: #888888;
}

.search-container {
    /* height: 100vh; */
    /* background-color: #101010; */
}

.search-content {
    padding-left: 24rpx;
    padding-bottom: 20rpx;
}

.search-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100vh;
    /* height: 200rpx; */
    /* background-color: #01D171; */
}

.search-title {
    padding: 26rpx 0;
}

.search-words {
    line-height: 52rpx;
    height: 52rpx;
    padding: 0 24rpx;
    background-color: #f5f5f5;
}

.goods-list-wrap {
    padding: 20rpx 0;
    overflow: hidden;
}

.goods-container-double {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.goods-item-double {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 345rpx;
    height: 540rpx;
    border-radius: 7px;
    background-color: #ffffff;
    overflow: hidden;
}

.goods-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14rpx;
}

.lease-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38rpx;
    min-height: 28rpx;
    margin-right: 10rpx;
    border-radius: 4rpx;
    font-size: 22rpx;
    background-color: #01d171;
    color: #ffffff;
}

.goods-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
}

.goods-tag {
    padding: 8rpx 10rpx;
    margin-right: 20rpx;
    border-radius: 4px;
    font-size: 22rpx;
    background-color: rgba(36, 163, 255, 0.1);
    color: #24a3ff;
}

.goods-price {
    display: flex;
    align-items: center;
    flex: 1;
}

.goods-container-one {
    display: flex;
    flex-direction: column;
}

.goods-item-one {
    box-sizing: border-box;
    display: flex;
    padding: 20rpx;
    border-radius: 7px;
    background-color: #ffffff;
}

.goods-item-one,
.goods-item-double {
    margin-bottom: 20rpx;
}
</style>
